<template>
	<view class="Allauthoriza">
		<uni-nav-bar title="绑定加注机" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
		<view class="authoriza" v-if="userinfo">
			<image :src="poster1" mode=""></image>
			<view class="phones">
				<view class="phones_tel">
					<text style="font-size: 30rpx">加注机别名 : {{ fillingAll.code }}</text>
				</view>
				<view class="phones_tel">
					<text style="font-size: 30rpx">姓名</text>
					<input type="text" :placeholder="userinfo.realname ? userinfo.realname : '请输入您的真实姓名'" v-model="name"
						style="width: 80%" @input="fpNumInput" maxlength="3" />
				</view>
				<view class="phones_tel">
					<text style="font-size: 30rpx">手机号</text>
					<input type="number" :placeholder="userinfo.mobile ? userinfo.mobile : '请输入手机号码'" maxlength="11"
						v-model="phone" style="width: 80%" />
				</view>
				<view class="phones_tel" v-if="!userinfo.mobile">
					<text style="font-size: 30rpx">验证码</text>
					<view class="phones_code">
						<input v-model="code" style="width: 50%" placeholder="请输入验证码" type="number" maxlength="4" />
						<view class="_code" @click="handleCodeClick('100')">{{ textArea }}</view>
					</view>
				</view>
			</view>
			<view class="phone_bottom">
				<view class="" @click="submit()">确定</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { fillings } from '@/gql/filling';
import { userInfo } from '@/gql/user';
import { getDriverID } from '@/stores/driverID';
import { navBack } from '@/utils/navigator';
import { showLoading, showToast, successToast } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import { nextTick, onMounted, ref } from 'vue';
import { poster1 } from '@/utils/Static';

const driver_id = getDriverID();
const userinfo = ref({});
const fillingAll = ref({});

const fillId = uni.getStorageSync('fillingID');

const name = ref(''); //用户姓名
const phone = ref('');
const code = ref('');
const textArea = ref('验证码');
const repeat = ref(true); //放重复点击
const btnBool = ref(false); //放重复点击
onMounted(() => {
  userInfor();
  fillLists();
});
/**
 * 获取用户信息
 */
function userInfor() {
  const payload = {
    query: userInfo,
    variables: {
      driver_id,
    },
  };
  toPublish('ql/driver/getDriverInfo', payload, (obj: any) => {
    const data = obj.data;
    userinfo.value = data.driver_info;
  });
}
/**
 * 获取加注机详情
 */
function fillLists() {
  showLoading('加载中');
  const payload = {
    query: fillings,
    variables: {
      id: fillId + '',
    },
  };
  toPublish('ql/driver/getFilling', payload, (obj: any) => {
    uni.hideLoading();
    const data = obj.data;
    fillingAll.value = data.fill_test;
  });
}
/**
 * 正则输入的数据
 */
function fpNumInput(e) {
  const { detail } = e;
  const inputRule = /[^\u4E00-\u9FA5]/g; ///只能输入中文
  const value = detail.value.replace(inputRule, '');
  nextTick(() => {
    name.value = value;
  });
}
/**
 * 正则手机号码
 */
function phoneTel() {
  const mobile = /^1[3-9]\d{9}$/;
  const userPhone = userinfo.value && userinfo.value.mobile ? userinfo.value.mobile : phone.value;
  return mobile.test(userPhone);
}
/**
 * 发送验证码
 */
function handleCodeClick() {
  if (!phone.value) {
    showToast('手机号不能为空');
    return;
  } else if (!phoneTel()) {
    showToast('请输入正确的手机号码');
    return;
  }
  if (btnBool.value) {
    btnBool.value = false;
    const payload = {
      event: 'notice',
      mobile: phone.value,
    };
    toPublish('driver/sendSms', payload, (obj: any) => {
      console.log(obj);
    });
    successToast('发送成功');
    let i = 60;
    let timer = setInterval(() => {
      textArea.value = +i + 's';
      i--;
      if (i < 0) {
        btnBool.value = true;
        textArea.value = '验证码';
        clearInterval(timer);
      }
    }, 1000);
  } else {
    return;
  }
}
/**
 * 判断提交授权
 */
function submit() {
  const mobile = phone.value ? phone.value : userinfo.value.mobile;
  const real_name = name.value ? name.value : userinfo.value.realname;
  if (!mobile || !real_name) {
    showToast('请将补全验证信息');
    return;
  } else if (!phoneTel()) {
    showToast('请输入正确的手机号码');
    return;
  }
  submit_s(mobile, real_name);
}
/**
 * 确认提交授权
 */
function submit_s(mobile, real_name) {
  showLoading();
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    driver_id,
    mobile: mobile,
    real_name: real_name,
    captcha: code.value,
    fill_id: fillId + '',
  };
  toPublish('order_test/applyFill', payload, (obj: any) => {
    const ref = obj;
    if (ref.code === 1) {
      successToast('绑定成功');
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/tester/testing',
        });
      }, 1500);
    } else {
      repeat.value = true;
      showToast(ref.msg);
    }
  });
}
</script>

<style lang="less">
@import url('../tester/less/ToGrant.less');
</style>
